<template>
    <div class="page">
        <nav-bar :isLogin="true">
            <template #left>
                <div class="lefts">
                    <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
                </div>
            </template>
            <template #center>
                <div>
                    确认订单
                </div>
            </template>
        </nav-bar>
         <div>
            <van-contact-card type="add" add-text="请添加一个收货地址" v-if="ArrayList.length==0" @click="$router.push('/address')"/>
            <van-contact-card type="edit" 

            :name="ArrayList[0].name+' '+ArrayList[0].phone" :tel="ArrayList[0].address" v-else 
            
            @click="$router.push('/address')" />
        </div>
        <div class="sdsj" v-if="orderinfo">
            <div class="time">
                送达时间
            </div>
            <div class="right">
                <p class="p1">尽快送达 | 预计 {{orderinfo.delivery_reach_time}}</p>
                <p class="p2"> 
                    <van-tag type="primary" class="tag">蜂鸟专送</van-tag>
                </p>
            </div>
        </div>
        <div style="margin: 10px 0;">
            <van-cell title="支付方式" value="在线支付" is-link  @click="show=true"/>
             <van-cell title="红包" value="暂时只在饿了么APP中支持" />
        </div>
        <div class="foods"  v-if="orderinfo">
            <div class="foodsname">
                <img :src="'https://elm.cangdu.org/img/'+orderinfo.cart.restaurant_info.image_path" alt="" class="shop_img"> <span>{{orderinfo.cart.restaurant_info.name}}</span>
            </div>
            <div>
                <div class="foodslist" v-for="(item,index) in orderinfo.cart.groups[0]" :key="index">
                    <span>
                        {{item.name}}
                    </span>
                    <span>
                        <span class="num"> ✖ {{item.quantity}}</span>
                        <span>￥{{item.price}}</span>
                    </span>
                </div>
                <div class="foodslist" v-for="(item) in orderinfo.cart.extra" :key="item.name">
                    <span>{{item.name}}</span>
                    <span>￥{{item.price}}</span>
                </div>
                   <div class="foodslist" style=" border-bottom: 1px solid #F1F1F1;">
                    <span>配送费</span>
                    <span>￥{{orderinfo.cart.deliver_amount}}</span>
                </div>
                <div class="foodslist">
                    <span>订单￥{{orderinfo.cart.original_total}}</span>
                    <span class="vc">待支付</span>
                </div>
                 <div class="foodslist">
                    <span></span>
                    <span class="vc">{{orderinfo.cart.original_total}}</span>
                </div>
            </div>
            <div >
                   <div class="foodslist">
                    <span>订单备注</span>
                    <span class="live">
                        口味、偏好等    <van-icon name="arrow" />
                    </span>
                </div>
                  <div class="foodslist">
                    <span>发票抬头</span>
                    <span class="live">
                        不需要开发票   <van-icon name="arrow" />
                    </span>
                </div>
            </div>
        </div>
        <div class="footer" v-if='orderinfo'>
            <div>待支付￥{{1235}}</div>
            <div class="btn" @click="sendOrder">确认下单</div>
        </div>

        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <div>
            <div class="title">
                支付方式
            </div>
            <div v-if="orderinfo">
            <van-radio-group v-model="radio">
                 <div v-for="(item,index) in orderinfo.payments" :key="index" class="payments">
                    <div :class="{disable:item.select_state==-1}">
                        {{item.name}} <span v-if="item.select_state==-1">{{item.description}}</span>
                 </div>
                 <div>
                      <van-radio :name="item.id" :disabled="item.select_state==-1" checked-color="#4cd964"></van-radio>
                 </div>
                 </div>
                 </van-radio-group>
            </div>
        </div>
        </van-popup>
    </div>
</template>
<script>
import { userOrder, getAdressList,sendOrder} from '@/api/login'
import { Toast } from 'vant'
export default {
    data() {
        return {
            ArrayList:[],
            orderinfo:null,
            data:null,
            show:false,
            radio:1,
            data:null
        }
    },
  
    async created() {
        let data = {
            restaurant_id: this.$route.query.id,
            geohash: this.$store.state.geohash,
            entities: [
                []
            ]
        }
        this.data = {
            geohash:data.geohash,
            entities:data.entities
        };
        let cartList = this.$store.state.cartList[this.$route.query.id];
        //处理数据获取下单参数
        cartList.forEach(item => {
            let obj = {
                id: item.food_id,
                name: item.name,
                packing_fee: item.packing_fee,
                price: item.price,
                quantity: item.num,
                sku_id: item.sku_id,
                specs: item.specs,
                stock: item.stock
            }
            data.entities[0].push(obj)
        })
        this.data = data;
        let res = await userOrder(data);
        console.log(res)
        this.orderinfo = res.data;
        let ArrayList = await getAdressList(this.$store.state.userId);
        console.log(ArrayList)
        this.ArrayList = ArrayList.data;
    },
    methods:{
       async sendOrder(){
            // 判断是否选择收货地址
            if(this.ArrayList.length == 0){
                Toast.fail("请您先选择收货地址")
                return;
            }
            this.data.address_id = this.ArrayList[0].id;
            this.data.deliver_time = "";
            this.data.description = '';
            this.data.paymethod_id = this.radio;
            this.data.sig= this.orderinfo.sig;
            this.data.come_from = 'mobile_web'
            console.log(this.data)
            let res = await sendOrder(this.$store.state.userId,this.orderinfo.id,this.data);
            console.log(res)
            if(res.data.status == 1){
                // 跳转到支付页面
                this.$router.push("/pay")
            }else{
                Toast.fail("订单信息异常")
            }
        }
    }
}
</script>
<style lang="less" scoped>
.page{
    padding-bottom: 80px;
}
.sdsj{
    padding: 10px;
    background: #fff;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    border-left: 3px solid #3190e8;
    .time{
        padding: 10px;
        font-size: 20px;
        font-weight: bold;
    }
    .right{
        padding: 10px 0;
    }
    .p1{
        font-size: 16px;
        color:#3190e8;
    }
    .p2{
        margin-top: 10px;
        .tag{
            float: right;
        }
    }
}
.foods{
    padding: 10px 20px;
    background: #fff;
    .foodsname{
        padding: 10px 0;
        font-size: 15px;
        
    border-bottom: 1px solid #F1F1F1;   
    }
    .shop_img{
        width: 30px;
        vertical-align: middle;
    }
    .foodslist{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #666;
        padding: 10px 0;
        .num{
            color: #f60;
            margin-right: 30px;
        }
        .vc{
            color: #f60;
        }
        .live{
            color: #b4b4b4;
        }
    }
}
.footer{
    width: 100%;
    background: #333;
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    position: fixed;
    bottom: 0;
    z-index: 999;
    div{
    padding: 15px 15px;
    }
    .btn{
        background: #56d176;
    }
}
.van-popup{
    bottom: 0 !important;
}
.title{
    font-size: 14px;
    color: #666;
    width: 100%;
    text-align: center;
    padding: 15px;
    background: #fafafa;
}
.payments{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    font-size: 17px;
}
.disable{
    color: #b4b4b4;
}
</style>